<style>
    .edit .ant-form-item-control{
        line-height: 100%;
    }
</style>
<template>
    <div class="page-container is-form">
        <a-spin :spinning="spinning">
            <a-form :layout="formLayout" :form="form">
                <a-form-item :wrapperCol="{span:18,offset:5}" help="* 建议图片 JPG、PNG、GIF格式，小于500k">
                    <a-upload  listType="picture-card"
                               :fileList="fileList"  @preview="handlePreview"
                               :action="uploadAction"  @change="handleChange">
                        <div v-if="fileList.length < 1">
                            <a-icon type="plus" />
                            <div class="ant-upload-text">上传</div>
                        </div>
                    </a-upload>
                    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                        <img alt="example" style="width: 100%" :src="previewImage" />
                    </a-modal>
                    <a-input type="hidden" v-decorator="['mainImage',{rules: [{ required: true, message: '请上传商品图片' }]}]" />
                </a-form-item>
                <a-form-item label="规格名称" v-bind="formItemLayout">
                    <a-input placeholder='请输入规格名称' v-decorator="['name',{rules: [{ required: true, message: '规格名称不能为空' }]}]" style="width: 100%;"/>
                </a-form-item>
                <a-form-item label="价格" v-bind="formItemLayout">
                    <a-input-number placeholder='0.00' v-decorator="['price',{rules: [{ required: true, message: '价格不能为空' }]}]"
                        :formatter="value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" :precision="2"
                        :parser="value => value.replace(/\￥\s?|(,*)/g, '')" style="width:100%"/>
                </a-form-item>
                <a-form-item label="库存" v-bind="formItemLayout">
                    <a-input-number placeholder='请输入库存' v-decorator="['stock',{rules: [{ required: true, message: '请输入库存' }]}]"
                                    :formatter="value => ` ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" :precision="0"
                                    :parser="value => value.replace(/\s?|(,*)/g, '')" :max="10000" style="width:100%"/>
                    <p class="default_tips">最大库存不超过10000</p>
                </a-form-item>
                <a-form-item :wrapperCol="{span:8,offset:5}">
                    <a-button type='primary' :loading="bntLoading" @click="onSubmit">保 存</a-button>
                </a-form-item>
            </a-form>
        </a-spin>
    </div>
</template>
<script>
    import {save} from "@/api/goodsSpec";
    export default {
        beforeCreate(){
            this.form = this.$form.createForm(this);
        },
        props:{
            goodsId:{
                type:Number,
                value: 0
            },
            specLength:{
                type:Number,
                value: 0
            }
        },
        data() {
            return{
                formLayout:'horizontal',
                spinning:false,
                loading:false,
                bntLoading:false,
                uploadAction:this.UPLOAD_URL,
                mainImage:'',
                fileList: [],
                previewVisible: false,
                previewImage: '',
            }
        },
        computed: {
            formItemLayout () {
                const { formLayout } = this
                return formLayout === 'horizontal' ? {
                    labelCol: { span:5},
                    wrapperCol: { span:18 },
                } : {}
            }
        },
        methods:{
            handleCancel() {
                this.previewVisible = false
            },
            handlePreview(file) {
                this.previewImage = file.url || file.thumbUrl
                this.previewVisible = true
            },
            handleChange({file, fileList}) {
                this.loading = true
                if(file.status == 'removed') this.form.setFieldsValue({'mainImage':''});
                if(file.status == 'uploading') {
                    const isJPG = file.type === 'image/jpeg';
                    const isPNG = file.type === 'image/png';
                    const isGif = file.type === 'image/gif';
                    if (!isJPG && !isPNG && !isGif) {
                        this.$message.error('图片格式错误,请检查后重新上传!');
                        this.loading = false;
                        return;
                    }
                    const isLt500KB = file.size / 1024 / 500
                    if (!isLt500KB) {
                        this.$message.error('图片大小不合适,请上传小于500KB的图片!');
                        this.loading = false;
                        return;
                    }
                }
                this.fileList = fileList;
                // 根据服务端返回数据筛选上传成功的文件
                fileList.forEach((file) => {
                    if (file.response) {
                        this.form.setFieldsValue({'mainImage': file.response.data});
                    }
                });
                this.loading = false;
            },
            onSubmit(){
                this.bntLoading = true;
                this.form.validateFields(
                    (err,values) => {
                        if (!err) {
                            this.onSave(values);
                        }else{
                            this.bntLoading = false;
                        }
                    },
                )
            },
            async onSave(data){
                this.spinning = true;
                data.sort = this.specLength + 1
                data.goodsId = this.goodsId
                this.spinning = false;
                this.$emit("save","add", data)
            }
        },
        mounted(){
        },
    }
</script>